<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.staticfile.org/echarts/5.4.0/echarts.min.js"></script>
</head>

<body>
    <div id="chart" style="width: 80vw;margin: 100px; height: 100px;"></div>

    <script type="module">

        const chartOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' },
                hideDelay: 0,
                confine: false
            },
            grid: {
                left: 0,
                top: 20,
                right: 0,
                bottom: 0,
                containLabel: true
            },
            xAxis: {
                type: 'value',
                max: 2,
                splitLine: { show: false },
                axisLine: { show: false },
                axisLabel: { show: false },
                axisTick: { show: false }
            },
            yAxis: {
                type: 'category',
                data: ['2022年重大风险电网防控项目'],
                splitLine: { show: false },
                axisLine: { show: false },
                axisLabel: {
                    show: true, // 显示Y轴标签
                    formatter: '{value}',
                    fontSize: 12,
                    color: '#333'
                },
                axisTick: { show: false }
            },
            series: [
                {
                    name: '已完成',
                    type: 'bar',
                    stack: '总数',
                    barWidth: 10, // 减小柱子宽度
                    legendHoverLink: false,
                    silent: true,
                    data: [{
                        typeName: '2022年重大风险电网防控项目',
                        planNum: 4,
                        completeNum: 2,
                        inSupplyNum: 2,
                        projects: [
                            {
                                id: '134',
                                projectName: '恩施东至朝阳500千伏线路工程',
                                projectType: '2022年重大风险电网防控项目',
                                percentComplete: 0.1,
                                typeOrder: 1,
                                version: 2
                            },
                            {
                                id: '162',
                                projectName: '宜昌-荆州江南220千伏电网优化工程',
                                projectType: '2022年重大风险电网防控项目',
                                percentComplete: 1,
                                typeOrder: 1,
                                version: 2
                            }
                        ],
                        value: 0
                    }],
                    itemStyle: {
                        color: {
                            colorStops: [
                                { offset: 0, color: '#1CC09C' },
                                { offset: 1, color: '#6AF0C3' }
                            ],
                            x: 0,
                            y: 1,
                            x2: 0,
                            y2: 0,
                            type: 'linear'
                        }
                    },
                    label: {
                        show: true,
                        position: 'right', // 标签位置改为右侧
                        formatter: function (params) {
                            return params.data.completeNum; // 显示已完成数量
                        },
                        fontSize: 12,
                        color: '#333'
                    },
                    z: 1
                },
                {
                    name: '在供',
                    type: 'bar',
                    stack: '总数',
                    barWidth: 10, // 减小柱子宽度
                    legendHoverLink: false,
                    silent: true,
                    data: [{
                        typeName: '2022年重大风险电网防控项目',
                        planNum: 4,
                        completeNum: 2,
                        inSupplyNum: 2,
                        projects: [
                            {
                                id: '134',
                                projectName: '恩施东至朝阳500千伏线路工程',
                                projectType: '2022年重大风险电网防控项目',
                                percentComplete: 0.1,
                                typeOrder: 1,
                                version: 2
                            },
                            {
                                id: '162',
                                projectName: '宜昌-荆州江南220千伏电网优化工程',
                                projectType: '2022年重大风险电网防控项目',
                                percentComplete: 1,
                                typeOrder: 1,
                                version: 2
                            }
                        ],
                        value: 2
                    }],
                    itemStyle: {
                        color: {
                            colorStops: [
                                { offset: 0, color: '#FFB031' },
                                { offset: 1, color: '#FED17A' }
                            ],
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            type: 'linear'
                        }
                    },
                    label: {
                        show: true,
                        position: 'right', // 标签位置改为右侧
                        formatter: function (params) {
                            return params.data.inSupplyNum; // 显示在供数量
                        },
                        fontSize: 12,
                        color: '#333',
                        offset: [30, 0] // 向右偏移，避免与前一个标签重叠
                    },
                    z: 1
                },
                {
                    name: '项目总数',
                    type: 'bar',
                    barGap: '-100%', // 调整为-100%，使其与堆叠柱子重叠
                    barWidth: 12, // 稍微比堆叠柱子宽一点，使其能够显示出来
                    data: [{
                        typeName: '2022年重大风险电网防控项目',
                        planNum: 4,
                        completeNum: 2,
                        inSupplyNum: 2,
                        projects: [
                            {
                                id: '134',
                                projectName: '恩施东至朝阳500千伏线路工程',
                                projectType: '2022年重大风险电网防控项目',
                                percentComplete: 0.1,
                                typeOrder: 1,
                                version: 2
                            },
                            {
                                id: '162',
                                projectName: '宜昌-荆州江南220千伏电网优化工程',
                                projectType: '2022年重大风险电网防控项目',
                                percentComplete: 1,
                                typeOrder: 1,
                                version: 2
                            }
                        ],
                        value: 2
                    }],
                    itemStyle: {
                        color: {
                            colorStops: [
                                { offset: 0, color: '#0A74FF' },
                                { offset: 1, color: '#29CCFF' }
                            ],
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            type: 'linear'
                        },
                        barBorderColor: '#1C4B8E',
                        barBorderWidth: 1
                    },
                    label: {
                        show: true,
                        position: 'top', // 标签位置改为顶部
                        formatter: function (params) {
                            return '总数: ' + params.data.planNum; // 显示计划总数
                        },
                        fontSize: 12,
                        color: '#333'
                    },
                    z: 0 // 确保这个系列在最底层
                }
            ]
        };

        // 使用示例
        const chart = echarts.init(document.getElementById('chart'));
        chart.setOption(chartOption);
    </script>
</body>

</html>